<style lang="less" scoped>
    .container{
        margin-top: 5rem;
        padding: 0.5rem;
        .header-text{
            font-size: 30px;
            font-weight: 200;
        }
        .login-form{
            margin-top: 1rem;
            .form-item{
                display: flex;
                justify-content: flex-start;
                padding: 0.8rem 0.5rem;
                border-bottom: solid 1px #cccccc;
                &:hover{
                border-bottom: solid 1px #99ffc0;
                    transition: 0.3s;
            }
                .item-text{
                    margin-right: 3rem;
                }
                .item-input{
                    border: none;
                    outline: none;
                    font-size: 1rem;
                }
            }
            .submit-login{
                margin-top: 3rem;
            }
        }
    }
</style>
<template>
    <div class="container">
        <span class="header-text">智能灯控系统</span>
        <div class="login-form">
            <div class="form-item">
                <span class="item-text">账号</span>
                <input class="item-input" v-model="loginForm.account" type="text">
            </div>
            <div class="form-item">
                <span class="item-text">密码</span>
                <input  class="item-input" v-model="loginForm.password"  type="password">
            </div>

            <x-button class="submit-login" @click.native="loginApi" type="primary">登录</x-button>
        </div>
    </div>
</template>


<script>
    export default{
        data(){
            return {
                loginForm:{
                    account:'',
                    password:'',
                    loginType:1
                }
            }
        },
        components: {},
        computed: {},
        methods: {
            loginApi(){
                if(!this.validate()){
                    this.$vux.toast.text('参数不满足要求', 'bottom');
                    return;
                }
                this.$vux.loading.isVisible();
                this.$store.dispatch('Login', this.loginForm).then((result) => {
                    if (result.status == 1) {
                        this.$router.push({path:'/switch'});
                    }else {
                        this.$vux.toast.text('登录失败', 'bottom');
                    }
                    this.$vux.loading.hide()
                }).catch((err) => {
                        this.$vux.loading.hide()
                });
            },
            validate(){
                if(this.loginForm.account.length < 4 || this.loginForm.password.length < 1){
                    return false;
                }
                return true;
            }
        },
        created: function () {

        }
    }
</script>
